今日目標原本是要切版出頁首與頁尾，結果才剛做就發現不知道要把css放到哪一個資料夾，對React的資料結構相當不了解，所以我要把今天的時間留給研究資料夾。

官方文件最多人使用的結構有兩種:

1. 按照功能或是路徑: 例如將關於我們頁面有相關的都放在同一個資料夾之下。

   about/
     index.js
     About.js
     AboutHeader.js
     AboutHeader.css
     AboutAPI.js
   

2. 按照檔案類型: 例如將元件的js全部放到component之下。

   components/
     Avatar.js
     Avatar.css
     Feed.js
     Feed.css
     FeedStory.js
     FeedStory.test.js
     Profile.js
     ProfileHeader.js
     ProfileHeader.css
   

*注意槽狀結構不要太多

怎麼放sass在React裡面?

過去我所做的專案都是在src資料夾中會在建立一個scss的資料夾放所有的.scss檔案，經過編譯後會自動在dist資料夾下變成.css檔案。

查詢了React的作法，首先先下載翻譯 CSS 語法的套件

npm i sass --save-dev

*dev(為開發或測試的時候需要的套件)這邊有詳細的說明

接著在.js檔案中引入，就可以看到樣式了!

//header.js

import './sassStyles/header.scss';

function Header(){
	return()
}

export default Header

希望明天可以開始切畫面與串功能!!!!